/*GENERAL*/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

html, body { font-family: "Roboto" !important; font-weight: 400 !important; margin: 0; padding: 0; height: 100%; }

body { padding-bottom: 70px; }

#wrapper { min-height: 100%; position: relative; }

a { color: #333333 !important; }

/*Landing Page */
.landing-container { background-color: #000; height: 100%; width: 100%; min-height: 700px; }

.landing-content { position: absolute; top: 50%; margin-top: -200px; left: 0; width: 100%; background-color: #000; }

.logo-container { margin: 0 auto; text-align: center; margin-left: auto; margin-right: auto; height: 300; }

.start-button { background: transparent; border: none; text-align: center; color: white !important; font-weight: 400; margin: 16% auto; padding: 10px; width: 40%; font-size: 16px; text-transform: uppercase; border: 2px solid #fff; }
.start-button a { color: white !important; }

/* Nav Bootstrap override */
.navbar-default { background-color: black !important; border-color: black !important; }

.navbar { border-radius: 0px !important; }

.navbar-default .navbar-brand { color: white !important; font-size: 16px !important; font-weight: bolder !important; font-family: arial; letter-spacing: 4px; }

.navbar-default .navbar-toggle .icon-bar { background-color: white !important; }

.navbar-toggle { border: 0px solid transparent !important; }

.navbar-default .navbar-toggle:hover { background: transparent !important; }

.navbar-default .navbar-toggle:focus { background-color: #3498db !important; border-radius: 0px !important; }

.navbar-default .navbar-nav > li > a { color: white !important; }

.navbar-default .navbar-nav > li > a:hover { color: #3498db !important; }

.navbar-default { position: relative; }

.navbar { margin-bottom: 0px !important; }

/* next and previous image*/
.fa-chevron-right.next { position: absolute; right: 0px; top: 25%; color: #000; }

.fa-chevron-left.previous { position: absolute; top: 25%; color: #000; z-index: 1000; }

.fa-chevron-right.next-cap { /*position: absolute;
right: 0px;*/ font-size: 16px; position: relative; right: -175px; top: 0px; }

.fa-chevron-left.previous-cap { position: absolute; left: 0; font-size: 16px; }

/*Content page styles*/
#content { height: auto; max-width: 400px; overflow: hidden; position: relative; margin: 0 auto; margin-bottom: 5%; width: 100%; }

.imgs { float: left; display: inline-block; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; padding: 0px; margin: 0px; width: 5000px; height: auto; cursor: pointer; /*apply a transfor to kick in the hardware acceleration.  Without this, the first time we add the transform you get odd rendering of the divs (half missing) */ -webkit-transform: translate3d(0px, 0px, 0px); /* margin:20% 0;*/ }

.imgs img { padding: 0px; margin: 0px; height: auto; margin-left: -3px; /*apply a transfor to kick in the hardware acceleration.  Without this, the first time we add the transform you get odd rendering of the divs (half missing) */ -webkit-transform: translate3d(0px, 0px, 0px); }

.img-cap-container { display: inline-block; }

.img-cap-container img { padding: 0px; margin: 0px; height: auto; /*apply a transfor to kick in the hardware acceleration.  Without this, the first time we add the transform you get odd rendering of the divs (half missing) */ -webkit-transform: translate3d(0px, 0px, 0px); max-width: 400px; width: 100%; /*margin-left:-1px;*/ }

.image-caption { overflow: hidden; position: relative; float: left; /*margin:10% 0;*/ width: 100%; margin-top: 5%; }

.caps { float: left; display: inline-block; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; margin: 0; padding: 0; -webkit-transform: translate3d(0px, 0px, 0px); position: relative; top: -5%; }

.caps ul { margin: 0px; padding: 0px; }

.caps ul > li { display: inline-block; max-width: 400px; text-align: center; -webkit-transform: translate3d(0px, 0px, 0px); font-weight: 100; font-style: italic; width: 100%; height: auto; font-size: 16px; line-height: 26px; min-height: 80px; }

.caps ul > li span { position: absolute; top: -4%; width: 80%; display: block; margin: 0 auto; text-align: center; left: 10%; }

/* share buttond */
.function-buttons-container { margin: 5% 0 1% 0%; }

i { width: 50px; height: 50px; vertical-align: middle; text-align: center; }

.function-buttons { width: 100%; text-align: center; font-size: 24PX; color: #fff; }

.fa { cursor: pointer; font-size: 27px; -webkit-transform: translate3d(0, 0, 0); height: 42px; padding: 5px; }

.fav { z-index: 1000; }

.favactivated { background: #40DD92; font-size: 34px; /*    height: 42px;
padding: 5px;*/ }

.added-caption-fav { position: absolute; top: 25%; text-align: center; margin: 0 auto; width: 200px; padding: 14px; background: black; color: #fff; font-size: 12px; left: 20%; }

.removed-caption-fav { position: absolute; top: 25%; text-align: center; margin: 0 auto; width: 200px; padding: 14px; background: black; color: #fff; font-size: 12px; left: 20%; }

/*ABOUT PAGE STYLE*/
.about-app-content p { font-weight: 100; font-size: 13px; line-height: 1.6; }

.about-app-content { padding: 0 10%; }

.about-app-content p span { font-weight: 400; font-size: 15px; }

/* RECAP PAGE STYLE */
#recap-content, #about-container { max-width: 400px; width: 100%; margin: 0 auto; padding-bottom: 100px; }

#recap-content { position: relative; }

h3.journey, h3.about-header { text-align: center; font-size: 16px; font-weight: 300; border-bottom: 1px solid #000; width: 70%; margin: 5% auto; padding-bottom: 5%; text-transform: uppercase; letter-spacing: 4px; }

.recap { display: inline-block; width: 48%; padding: 2%; min-height: 150px; margin-left: 1%; }

.recap-image { float: left; }

.recap-image img { width: 100%%; float: left; }

.recap-image-caption { width: 100%%; float: left; position: relative; bottom: 0; margin-top: 8%; font-weight: 300; line-height: 14px; height: 100%; min-height: 25px; border-bottom: 1px solid; border-top: 1px solid; padding-top: 5px; }

.recap-image-caption p { font-size: 10px; position: relative; min-height: 25px; }

.recap-image-caption p:before, .recap-image-caption p:after { content: '""'; display: inline-block; font-family: "Coustard"; font-size: 12px; padding-right: 5px; }

.recap-image-caption p:after { padding-left: 5px; padding-right: 0; }

/*Enter own caption modal*/
.form { display: block; position: absolute; top: 25%; text-align: center; margin: 0 auto; width: 100%; padding: 60px; background: rgba(255, 255, 255, 0.69); }

p.enter-cap { font-size: 16px; font-weight: 300; }

.add-caption { background: #000; border: none; text-align: center; color: #fff; font-weight: 100; margin-top: 20px; padding: 10px; }

.input { width: 200px; height: 40px; }

.close-btn { transform: rotate(45deg); -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Opera, Chrome, and Safari */ opacity: 1 !important; font-size: 18px; }

.close-form { float: right; position: absolute; top: 8px; right: 10px; }

/* Footer */
.footer { height: 50px; max-width: 400px; margin: 0 auto; background: #3498db; background: #000; width: 100%; height: 100px; position: absolute; bottom: 0; left: 0; }

/*Spinner*/
#spinner { /*margin: 100px auto 0;
width: 70px;
text-align: center;*/ text-align: center; background: #fff; height: 100%; position: absolute; z-index: 1100; width: 100%; padding: 50% 0; display: block; }

#spinner > div { width: 18px; height: 18px; background-color: #333; border-radius: 100%; display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; /* Prevent first frame from flickering when animation starts */ -webkit-animation-fill-mode: both; animation-fill-mode: both; }

#spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }

#spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }

.navbar-fixed-bottom { z-index: 1200 !important; }

.no-js #spinner { display: none; }

.js #spinner { text-align: center; background: #fff; height: 100%; position: absolute; z-index: 1100; width: 100%; padding: 25%; display: block; }

@-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); }
  40% { -webkit-transform: scale(1); } }
@keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0); -webkit-transform: scale(0); }
  40% { transform: scale(1); -webkit-transform: scale(1); } }
@media only screen and (max-width: 420px) { .fa-chevron-right.next-cap { right: -135px; } }
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) { .landing-container { min-height: 568px; }
  .imgs { margin: 5% 0; }
  .fa-chevron-right.next-cap { right: -160px; } }
